<template>
 <h1>El-日期时间选择器组件</h1>
  <el-date-picker
    type="date"
    v-model="rq"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    @change="console.log(rq)"
  ></el-date-picker>
  <!--format控制显示的值   value-format是选择提交后的值 控制台显示的值-->
  <br>
  <el-date-picker
      type="datetime"
      v-model="time"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="console.log(time)"
  ></el-date-picker>
  <br>
  <el-date-picker
     type="datetimerange"
     v-model="times"
     format="YYYY-MM-DD HH:mm:ss"
     value-format="YYYY-MM-DD HH:mm:ss"
     @change="f"
     start-placeholder="开始"
     end-placeholder="结束"
     range-separator="到"
  ></el-date-picker>
<!--range-separator 可以修改中间符号分隔符-->
</template>

<script setup>
import {ref} from "vue";

const rq=ref('');
const time=ref('');
const times=ref([]);
const f=()=>{
  console.log(times.value);
  console.log(times.value[0]);
  console.log(times.value[1]);
}
</script>


<style scoped>

</style>